
<h2>Containers:</h2>

<div>
    <ul class="nav nav-pills pull-left">
        <li class="dropdown">
            <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" data-target="#">Actions <b class="caret"></b></a>
            <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
                <li><a tabindex="-1" href="" ng-click="startAction()">Start</a></li>
                <li><a tabindex="-1" href="" ng-click="stopAction()">Stop</a></li>
                <li><a tabindex="-1" href="" ng-click="restartAction()">Restart</a></li>
                <li><a tabindex="-1" href="" ng-click="killAction()">Kill</a></li>
                <li><a tabindex="-1" href="" ng-click="pauseAction()">Pause</a></li>
                <li><a tabindex="-1" href="" ng-click="unpauseAction()">Unpause</a></li>
                <li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
            </ul>
        </li>
    </ul>

    <div class="pull-right form-inline">
        <input type="checkbox" ng-model="displayAll" id="displayAll" ng-change="toggleGetAll()"/> <label for="displayAll">Display All</label>&nbsp;
        <input type="text" class="form-control" style="vertical-align: center" id="filter" placeholder="Filter" ng-model="filter"/> <label class="sr-only" for="filter">Filter</label>
    </div>
</div>
<table class="table table-striped">
    <thead>
        <tr>
            <th><label><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()" /> Select</label></th>
            <th>
                <a href="#/containers/" ng-click="order('Names')">
                    Name
                    <span ng-show="sortType == 'Names' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="sortType == 'Names' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                </a>
            </th>
            <th>
                <a href="#/containers/" ng-click="order('Image')">
                    Image
                    <span ng-show="sortType == 'Image' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                </a>
            </th>
            <th>
                <a href="#/containers/" ng-click="order('Command')">
                    Command
                    <span ng-show="sortType == 'Command' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="sortType == 'Command' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                </a>
            </th>
            <th>
                <a href="#/containers/" ng-click="order('Created')">
                    Created
                    <span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                </a>
            </th>
            <th>
                <a href="#/containers/" ng-click="order('Status')">
                    Status
                    <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                    <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                </a>
            </th>
            <th>
                Log
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="container in (filteredContainers = ( containers | filter:filter | orderBy:sortType:sortReverse))">
            <td><input type="checkbox" ng-model="container.Checked" /></td>
            <td><a href="#/containers/{{ container.Id }}/">{{ container|containername}}</a></td>
            <td><a href="#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
            <td>{{ container.Command|truncate:40 }}</td>
            <td>{{ container.Created * 1000 | date: 'yyyy-MM-dd' }}</td>
            <td><span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span></td>
            <td><a href="#/containers/{{ container.Id }}/logs">stdout/stderr</a></td>
        </tr>
    </tbody>
</table>
